<template>
  <div>
    <BMap
      :zoom="15"
      enableScrollWheelZoom
      mapStyleId="0f3219e982947931ae2893345940df80"
      ref="map"
      @initd="get"
      :center="{
        lat: 22.563594,
        lng: 114.103729,
      }"
      height="calc(100vh - 100px)"
    >
      <BCircle
        stroke-style="solid"
        strokeColor="#abe8c6"
        :strokeOpacity="0.8"
        fillColor="#dd4c35"
        :fillOpacity="0.3"
        :center="{ lat: 22.565671, lng: 114.098563 }"
        :radius="3000"
      />
      <!-- <BLabel
        :content="content"
        :position="{ lng: 114.098563, lat: 22.565671 }"
        :style="{
          color: '#252525',
          border: 'none',
          borderRadius: '3px',
          padding: '5px 10px',
          fontSize: '16px'
        }"
      /> -->
      <template v-if="!isLoading">
        <BMarker title="您的位置" :position="location.point"></BMarker>

        <!-- <BCircle
          strokeStyle="solid"
          strokeColor="#0099ff"
          :strokeOpacity="0.8"
          fillColor="#0099ff"
          :fillOpacity="0.5"
          :center="location.point"
          :radius="location.accuracy"
        /> -->
      </template>
      <BMarker :position="location.point"></BMarker>
      <BLocation :locationSuccess="locationSuccess()" />
    </BMap>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useBrowserLocation } from "vue3-baidu-map-gl";
const map = ref();
const { get, location, isLoading, isError, status } = useBrowserLocation(
  null,
  () => {
    map.value.resetCenter();
  }
);
const content = ref<string>("打卡范围");
function locationSuccess() {
  console.log(1);
}
</script>
